//.layout-wrapper-simple .layout-wrapper-box .layout-container {
//    padding-top: 0;
//}

.module-c2c-box {
    width: 1200px;
    margin: 0 auto;

    .ui-account-box {
        &:not(first-child){
            box-shadow: 0 0 32px #e2e2e2;
            background-color: #fff;
            padding: 24px;
            border-radius: 4px;
            margin-bottom: 24px;
        }
        //&:last-child {
        //    margin-bottom: 0;
        //}
        .box-content {
            border: 1px $color-border solid;
        }

        .asset-info{
            padding-bottom: 24px;
            display: flex;
            align-items: center;

            &-item{
                display: inline-block;
                margin-left: 40px;
                font-size: 12px;

            }
        }

        &-inner {
            margin-bottom: 32px;
            .box-content {
                border: 0 none;
            }
        }
    }
}

.module-c2c-showad{
    transform: translateY(-60px);
    margin: 0 auto;
    width: 100%;

    .header{
        width: 100%;
        height: 460px;
        text-align: center;
        background-image: url('../img/c2c-bg.jpg');
        background-size: cover;
        >.title{
            padding-top: 160px;
            font-size: 48px;
            letter-spacing:8px;
            color: #fff;
        }
        >.sub-title{
            padding-top: 16px;
            font-size: 22px;
            letter-spacing:16px;
            color: #6eafda;
        }
        >.btn{
            display: inline-block;
            width: 210px;
            margin-top: 56px;
            border: 1px solid #fff;
            line-height: 60px;
            font-size: 16px;
            color: #fff;
            &:hover{
                background: rgba(255,255,255,.1);
            }
        }
    }

    .content{
        width: 1200px;
        margin: 0 auto;
        .golden{
            padding: 40px 0;
            &-title{
                text-align: center;
                font-size: 20px;
                padding-bottom: 24px;
                .title-line{
                    display: inline-block;
                    width: 75px;
                    height: 1px;
                    background:linear-gradient(90deg,#f0a931 ,transparent);
                    transform: translate(4px,-6px);
                    &:first-child{
                        transform: rotate(-180deg) translate(4px,6px);
                    }
                }
            }
            &-content{
                display: flex;
                align-content: space-between;
                align-items:center;
                height: 100px;
                padding-left: 36px;
                background: #fff;
                box-shadow: 0px 3px 3px #e0e0e0;
                .info{
                    flex: 0 0 180px;
                    height: 60px;
                    border-right: 1px solid #e8e8ea;
                    .golden-user{
                        padding: 5px 0;
                        .first-name{
                            background: #f0a931;
                            width: 50px;
                            height: 50px;
                            line-height: 50px;
                            font-size: 22px;
                        }
                        .nick-name{
                            .count{
                                color: #a1a1a1;
                            }
                        }
                    }
                }
                .trade{
                    flex: 1;
                    padding-left: 60px;
                    &-text{
                        color: #888888;
                        height: 24px;
                        >.em{
                            font-size: 15px;
                            color: #1d1f21;
                            font-weight: bold;
                        }
                    }
                    &-icon{
                        padding: 0 16px;
                    }
                    &-item{
                        position: relative;
                        display: inline-block;
                        width: 305px;
                        .item-label{
                            position: absolute;
                            right: 20px;
                            top: 8px;
                            font-weight: bold;
                            width: auto;
                        }
                        .item-input{
                            display: inline-block;
                            width: 100%;
                        }
                        .select-content{
                            left:auto;
                            right: 0;
                            line-height: 26px;
                        }
                    }
                    &-btn{
                        display: inline-block;
                        margin-left: 109px;
                        .btn{
                            font-size: 15px;
                            color: #fff;
                            background-color: #1396ff;
                            border-radius: 4px;
                            height: 36px;
                            line-height: 36px;
                            text-align: center;
                            width: 100px;
                            display: inline-block;
                        }
                    }
                }
            }
        }




        .ad-info{
            .info-header{
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                border-bottom: 1px solid #e8e8e9;
                >.btn{
                    padding-bottom: 24px;
                    font-size: 16px;
                    margin-right: 32px;
                    >a{
                        color:#1e97fc;
                        vertical-align: middle;
                    }
                    >img{
                        vertical-align: middle;
                        margin-right: 4px;
                    }
                }
            }
            .m-tab {
                ul.list {
                    li.item {
                        .item-link {
                            line-height: 90px;
                            margin: 0 50px;
                            background-color: #fafafa;
                            border-bottom: 2px solid #fafafa;
                            color: #a1a1a1;
                            font-size: 16px;
                            transition: all 0s;
                            &:hover {
                                cursor: pointer;
                            }
                            &--active {
                                cursor: default;
                                pointer-events: none;
                                color:#000000;
                                border-bottom: 2px solid #0a94ff;
                            }
                        }
                    }
                }
            }
        }


        .user-info{
            position: relative;
            display: flex;
            padding: 10px 0;

            %circle {
                text-align: center;
                border-radius: 50%;
                background-color: #99d4fd;
                color: #fff;
            }

            >.first-name{
                width: 40px;
                height: 40px;
                line-height: 40px;
                font-size: 18px;
                @extend %circle;
            }
            .nick-name{
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                margin-left: 16px;
                >.text{
                    width: 160px;
                }
            }
            &-popover{
                position: absolute;
                left:110px;
                top:-50px;
                width: 226px;
                padding: 24px;
                box-sizing: border-box;
                visibility: hidden;
                opacity: 0;
                transition: all .3s;
                z-index: 2;
                //@extend %pop-background;
                background-color: #fff;
                border-radius: 4px;
                box-shadow: 0px 6px 0px 0px #ababab , 0px 2px 8px 2px #f1f1f1;
                .user-pop{
                    display: flex;
                    padding-bottom: 16px;
                    border-bottom: 1px dashed #f1f1f1;
                    >.first-name-pop{
                        width: 50px;
                        height: 50px;
                        line-height: 50px;
                        font-size: 22px;
                        @extend %circle;
                    }
                    >.nick-name-pop{
                        font-size: 16px;
                        >.text{
                            width: 100px;
                            font-size: 13px;
                        }
                    }
                }
                .trade-pop{
                    padding-top: 10px;
                    >.trade-item{
                        height: 36px;
                        line-height: 36px;
                        font-size: 13px;
                        vertical-align: middle;
                        color:#333;
                        opacity: .5;
                        &--active{
                            opacity: 1;
                        }
                        >.icon-check{
                            margin-left:8px;
                        }
                    }
                    .icon{
                        color:#a1a1a1;
                        font-size: 18px;
                        margin: 0 8px 0 16px;
                        vertical-align: middle;
                    }
                }

            }
            &:hover{
                .user-info-popover{
                    visibility: visible;
                    opacity: 1;
                }
            }
        }


        .select{
            position: relative;
            &-title{
                cursor: pointer;
                display: inline-block;
                //width: 100%;
                height: 100%;
            }
            &-content{
                position: absolute;
                left: -20px;
                @extend %pop-background;
                .item{
                    padding: 4px 24px;
                    cursor: pointer;
                    &--active{
                        background-color: #fcfcfc;
                    }
                    &:hover{
                        background-color: #fafafb;
                    }

                }
            }
            .icon-allow-down{
                display: inline-block;
                color: #333;
                transform-origin: 50% 50%;
                transition:transform .2s ;
                &--active{
                    transform: rotate(-180deg);
                }
            }
        }
    }






}

@import "./ad/style";
@import "./order/style";
@import "./complain/style";
@import "./components/style";

